<template>
  <div class="lifeCycle">
    <div class="box">
      <h1>生命周期子组件</h1>
      <h1 ref="msgdom">{{message}}</h1>
      <button  @click="changeData">改变数据</button>

    </div>
  </div>
</template>

<script>
export default {
  name: 'lifeCycle-page',
  props: {},
  data: function () {
    return {
      message: '改变前的数据',
    }
  },
  methods: {
    changeData(){
      this.message = '点击改变后的数据';
    },

  },
  beforeCreate() {
    console.log('Son-beforeCreate:',this.message,this.$refs.msgdom);
  },
  created: function () {
    console.log('Son-created:',this.message,this.$refs.msgdom);
  },
  beforeMount: function () {
    console.log('Son-beforeMount:',this.message,this.$refs.msgdom);
    // console.log('Son-beforeMount-innerHTML: ',this.$refs.msgdom.innerHTML);

  },
  mounted: function () {
    console.log('Son-mounted:',this.message,this.$refs.msgdom);
    console.log('Son-mounted-innerHTML: ',this.$refs.msgdom.innerHTML);

  },
   beforeUpdate: function () {
    console.log('Son-beforeUpdate:',this.message,this.$refs.msgdom);
    console.log('Son-beforeUpdate-innerHTML: ',this.$refs.msgdom.innerHTML);

  },
  updated: function () {
    console.log('Son-updated:',this.message,this.$refs.msgdom);
    console.log('Son-updated-innerHTML: ',this.$refs.msgdom.innerHTML);

  },
  beforeDestroy: function () {
    console.log('Son-beforeDestroy',this.message,this.$refs.msgdom);
  },
  destroyed: function () {
    console.log('Son-destroyed',this.message,this.$refs.msgdom);
  },
}
</script>

<style scoped>
.box{
  height: 150px;
  padding: 30px;
  border: 5px solid ;
}
</style>

